<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>下班倒计时</title>
    <style>
      body {
        background-color: #2f2f2f;
        color: #fff;
        font-family: Arial, sans-serif;
        text-align: center;
        background: url('https://api.yimian.xyz/img?type=wallpaper') no-repeat
          center center fixed;
        background-size: cover;
      }
      h1 {
        margin-top: 100px;
        font-size: 5em;
        color: #fff;
        font-size: 3rem;
        font-family: 'Arial', sans-serif;
        text-align: center;
        text-shadow: 2px 2px 4px #000;
      }
      p {
        color: #fff;
        font-size: 1.5rem;
        font-family: 'Arial', sans-serif;
        text-align: center;
        margin-top: 20px;
      }
      input[type='time'] {
        background-color: #fff;
        border-radius: 4px;
        border: none;
        color: #2f2f2f;
        font-size: 1.5em;
        margin-bottom: 20px;
        padding: 10px;
      }
      input[type='submit'] {
        background-color: #f44b4b;
        border-radius: 4px;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 1.5em;
        padding: 10px;
      }
      .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 10px;
        background-color: #2f2f2f;
        color: #fff;
        font-size: 1.2em;
      }
      #countdown h2 {
        color: #fff;
        font-size: 4rem;
        font-family: 'Arial', sans-serif;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: popUp 0.5s ease-in-out 0s 1 forwards;
      }

      @keyframes popUp {
        0% {
          opacity: 0;
          transform: translate(-50%, -60%);
        }
        70% {
          transform: translate(-50%, -50%);
        }
        100% {
          opacity: 1;
          transform: translate(-50%, -50%);
        }
      }
    </style>
  </head>
  <body>
    <h1>下班倒计时</h1>
    <form>
      <label>下班时间:</label>
      <input type="time" id="time" required />
      <br />
      <input type="submit" value="开始倒计时" />
    </form>
    <div id="countdown"></div>
    <a href="https://github.com/52js">
      <div class="footer">Copyright © 2023 52js, 川少. All rights reserved. </div>
    </a>
    <script>
      // 获取存储的下班时间
      var endTime = localStorage.getItem('endTime')
      var timer = null
      if (endTime) {
        document.getElementById('time').value = endTime
        startCountdown()
      }
      // 保存下班时间
      document.querySelector('form').addEventListener('submit', function (e) {
        e.preventDefault()
        var time = document.getElementById('time').value
        localStorage.setItem('endTime', time)
        clearInterval(timer)
        startCountdown()
      })
      // 开始倒计时
      function startCountdown() {
        var endTime = localStorage.getItem('endTime')
        if (!endTime) return
        var end = new Date()
        end.setHours(endTime.substr(0, 2), endTime.substr(3, 2), 0, 0)
        var countdown = document.getElementById('countdown')

        timer = setInterval(function () {
          var now = new Date()
          var diff = end - now
          if (diff < 0) {
            clearInterval(timer)
            countdown.innerHTML = '<h2>下班啦！</h2>'
          } else {
            var hours = Math.floor(diff / (1000 * 60 * 60))
            var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
            var seconds = Math.floor((diff % (1000 * 60)) / 1000)
            countdown.innerHTML =
              '<h2>' +
              hours +
              ' 小时 ' +
              minutes +
              ' 分钟 ' +
              seconds +
              ' 秒</h2>'
          }
        }, 1000)
      }
    </script>
  </body>
</html>
